<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>装备材料清单新增</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <script type="text/javascript" src="../../js/jquery-3.4.1.js"></script>
</head>
<body>

<div class="layui-form" lay-filter="LAY-form-display" id="LAY-form-display"
     style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">商品</label>
        <div class="layui-input-inline">
            <select class="layui-select" name="goodsId" lay-search autocomplete="off"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">需要数量</label>
        <div class="layui-input-inline">
            <input type="text" name="needs" lay-verify="required" placeholder="请输入数量" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">剩余数量</label>
        <div class="layui-input-inline">
            <input type="text" name="remaining" placeholder="请输入数量" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">完成</label>
        <div class="layui-input-inline">
            <input type="radio" name="collectStatus" value="1" title="完成" lay-filter="genFlag">
            <input type="radio" name="collectStatus" value="0" title="未完成" lay-filter="genFlag" checked>
        </div>
    </div>

    <!--隐藏按钮、id-->
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-form-submit" id="LAY-form-submit" value="确认添加/编辑">
        <input type="text" name="id">
        <input type="text" name="eqmId">
        <button lay-active="get" id="getBtn">获取详情</button>
    </div>
</div>

<script src="../../layuiadmin/layui/layui.all.js"></script>
<script type="text/javascript" src="../../layuiadmin/default.js"></script>
<script>
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'util'], function () {
        let $ = layui.$
            , form = layui.form
            , util = layui.util;


        /*静态变量*/
        const pre = '/equipmentList';
        const server = {
            add: pre + '/add',
            update: pre + '/update',
            get: pre + '/get'
        };

        // 监听提交
        form.on('submit(LAY-form-submit)', function (data) {
            let field = data.field; //获取提交的字段
            let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            let url = server.add;
            // 存在id 更新
            if (field.id) {
                url = server.update;
            }
            //提交 Ajax 成功后，关闭当前弹层并重载表格
            //$.ajax({});
            $.post(url, JSON.stringify(field), function (res) {
                if (res.code !== 0) {
                    layer.msg('操作出错:[' + res.message + ']', {icon: 5});
                } else {
                    layer.msg('操作成功', {icon: 6});
                    parent.layui.table.reload('LAY-table'); //重载表格
                    parent.layer.close(index); //再执行关闭
                }
            }, 'JSON');
        });

        // 监听按钮时间
        util.event('lay-active', {
            get: function (o) {
                let id = $('[name="id"]').val();

                $.get(server.get + '/' + id, function (res) {
                    if (res.code != 0) {
                        layer.msg('获取详情异常,' + res.message);
                        return;
                    }
                    let data = res.data;
                    form.val('LAY-form-display', {
                        accountName: data.accountName,
                        password: data.password,
                        confirmPwd: data.password,
                        name: data.name,
                        phone: data.phone,
                        idCard: data.idCard
                    });

                });

            }
        });

        // 监听input
        $('[name="needs"]').blur(function(){
            $('[name="remaining"]').val($('[name="needs"]').val());
        });


        // 商品列表 - 一次性把所有商品查询出来
        $.get('/goods/listByName?name=', function (res) {

            $('[name="goodsId"]').empty();
            $('[name="goodsId"]').append(new Option("商品", ""));
            $.each(res.data, function (index, item) {
                $('[name="goodsId"]').append(new Option(item.name, item.id));
            });

            form.render("select");
        });

    })
</script>
</body>
</html>